<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket</title>
  </head>
  <body>
    <div id="message"></div>
    <input id="text" type="text" />
    <input type="button" id="btn" value="点击发送信息" />
    <script>
      let webSocket = null;
      var btn = document.getElementById("btn");
      if ("WebSocket" in window) {
        websocket = new WebSocket("ws://192.168.8.49:8088/test/one");
        //连接发生错误的回调方法
        websocket.onerror = function () {
          setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function (event) {
          //setMessageInnerHTML("open");
        };

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
          setMessageInnerHTML(event.data);
        };

        //连接关闭的回调方法
        websocket.onclose = function () {
          setMessageInnerHTML("close");
        };

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
          websocket.close();
        };

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
          document.getElementById("message").innerHTML += innerHTML + "<br/>";
        }

        //关闭连接
        function closeWebSocket() {
          websocket.close();
        }

        //发送消息
        function send() {
          var message = document.getElementById("text").value;
          console.log(message);
          websocket.send(message);
        }
        btn.addEventListener("click", showMsg, false); //鼠标单击的时候调用showMes这个函数
        function showMsg() {
          send();
        }
      } else {
        alert("对不起您的浏览器不支持WebSocket！请换个浏览器");
      }
    </script>
  </body>
</html>
